import React from 'react';
import { hashHistory, Link } from 'react-router';
import qs from 'querystring';
import { connect } from 'react-redux';
import { Icon, Layout } from 'antd';
import styles from './style.css';
import { getCategory } from '../../actions/categoryAction';
import { getArticleById, getSideArticleList, updateSideCategory } from '../../actions/homeAction';
import Menus from './menus';
import 'rc-menu/assets/index.css';
const { Header, Content, Footer } = Layout;

@connect(state => ({
  category: state.admin.category,
  categoryPath: state.home.categoryPath,
  sideCategory: state.home.sideCategory,
  sideArticle: state.home.sideArticle,
  article: state.home.article,
}), { getCategory, getArticleById, updateSideCategory, getSideArticleList, })
export default class extends React.Component {

  unlisten = f => f;

  async componentDidMount() {
    document.title = '﻿中正（深圳）投资有限公司';
    const { getCategory, updateSideCategory, getSideArticleList } = this.props;

    const seprator = location.hash.indexOf('?');
    const querystring = location.hash.slice(seprator + 1);
    const { cid } = qs.parse(querystring);
    await getCategory();
    const { subMenuIds, firstLevel } = await updateSideCategory(cid);

    if (subMenuIds.length === 0 && firstLevel) {
      await getSideArticleList(cid);
    }

    await this.getData();

    this.unlisten = hashHistory.listen(async (loc) => {
      if (loc.action === 'PUSH') {
        await this.getData();
      }
    });
  }

  async getData() {
    const seprator = location.hash.indexOf('?');
    const querystring = location.hash.slice(seprator + 1);
    const { id } = qs.parse(querystring);
    await this.props.getArticleById(id);
  }

  componentWillUnmount() {
    this.unlisten();
  }

  render() {
    const { category, sideCategory = [], sideArticle = [], article, categoryPath } = this.props;

    const sideMenus = sideCategory.concat(sideArticle);
    return (
      <Layout>
        <Header style={{
          background: '#920003',
          width: '100%',
          height: '90px',
          lineHeight: '90px',
          margin: '0 auto'
        }}>
          <div className={styles.center1200}>
            <Link to={`/`} className={styles.logo}></Link>
            <Menus list={category.list} />
          </div>
        </Header>
        <Content className={styles.container}>
          <div className={styles.sideMenu}>
            {
              sideMenus.map(item =>
                <div className={styles.menuCell} key={`sidemenu-${item.id}`}>
                  <Link to={item.title ? `article?cid=${item.cid}&id=${item.id}` : `/category?cid=${item.id}`}>
                    <div className={styles.link}>{item.name || item.title}</div>
                  </Link>
                </div>
              )
            }
          </div>
          <div style={{ flex: 1 }}>
            <div className={styles.pageHeader}>
              当前位置：
              <Link className={styles.routeLink} to={`/`}>首页</Link>
              {
                Array.isArray(categoryPath) && categoryPath[0]
                  ?
                  <span>
                    <Icon className={styles.divider} type="right" />
                    <Link className={styles.routeLink}
                          to={`/category?cid=${categoryPath[0].id}`}>{categoryPath[0].name}</Link>
                  </span>
                  : null
              }

              {
                Array.isArray(categoryPath) && categoryPath[1]
                  ?
                  <span>
                    <Icon className={styles.divider} type="right" />
                    <Link className={styles.routeLink}
                          to={`/category?cid=${categoryPath[1].id}`}>{categoryPath[1].name}</Link>
                  </span>
                  : null
              }
            </div>
            <div className={styles.content} style={{ padding: '30px' }}>
              <div className={styles.articleTitle}>{article.title}</div>
              <div className={styles.articleTime}>
                更新时间：{article.create_time}
              </div>
              <div dangerouslySetInnerHTML={{ __html: article.content }}></div>
            </div>
          </div>
        </Content>
        <Footer className={styles.footer}>
          <a href="http://www.miitbeian.gov.cn/" target="_blank" className={styles.footerLink}>粤ICP备18013179号</a>
          <span style={{ color: '#999', fontSize: '12px', margin: '0 0 0 10px' }}>All Rights Reserved ©2017</span>
          <Link to="/login?type=0" style={{ margin: '0 0 0 10px', fontSize: '12px', color: '#999' }}>管理员登录</Link>
        </Footer>
      </Layout>
    );
  }
}
